<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formwork2</title>
    <script src="jquery-3.6.0.min.js"></script>
    
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <style>
        .form {
            width: 800px;
            margin: 0 auto;
        
        }
        .del {
            color: blue;
			cursor: pointer;
        }
        .edit {
            color: blue;
			cursor: pointer;
        }
    </style>
</head>
<body>
    <form class="form">
        <!-- <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div> -->
        <div class="form-group">
            <label for="stuNo">学号</label>
            <input type="text" class="form-control" id="stuNo" value="" disabled="disabled">
        </div>
        <div class="form-group">
          <label for="stuName">姓名</label>
          <input type="text" class="form-control" id="stuName">
        </div>
        <div class="form-group">
            <label for="className">班级</label>
            <input type="text" class="form-control" id="className">
        </div>
        <div class="form-group">
            <label for="className">专业</label>
            <input type="text" class="form-control" id="major">
        </div>
        <!-- <div class="form-group form-check">
          <input type="text" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div> -->
        <p id="tip"></p>
        <!-- <button class="btn btn-primary" id="add" onclick="tip()">添加</button> -->
        <input class="btn btn-primary" type="button" value="添加" id="add" >
        <!-- <button  class="btn btn-primary" id="add">添加</button> -->
        <input type="button" class="btn btn-primary" value="更新" id="update" >
        <button class="btn btn-primary" id="clear" onclick="clear()">清空</button>
        <!-- <button  class="btn btn-primary" id="update">更新</button> -->
    </form>
      <hr>
      <table class="table" id="table">
        <thead>
          <tr>
            <th scope="col">学号</th>
            <th scope="col">姓名</th>
            <th scope="col">班级</th>
            <th scope="col">专业</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <!-- <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody> -->
    </table>
    <script>   
    window.onload = function() {
        //数据存放
        let info = [
            {
                stuNo: 1,
                stuName: "张三",
                className: "软件204",
                major: "软件",

            },
            {
                stuNo: 2,
                stuName: "李四",
                className: "软件204",
                major: "软件",

            }
        ]
        let oriHtml = document.getElementById('table').innerHTML
        $("#stuNo").val(info.length + 1);
        draw()

        
        function draw() {
            let strOri = oriHtml
			console.dir(strOri)
            for (let i = 0; i < info.length; i++) {
					strOri += `
                    <tbody>
                        <tr>
                            <th scope="row">
                                ${i + 1}
                            </th>
                            <td>
                                ${info[i].stuName}
                            </td>
                            <td>
                                ${info[i].className}
                            </td>
                            <td>
                                ${info[i].major}
                            </td>
                            <td>
								<span class="del" id="${info[i].stuNo}">
									删除
								</span>
                                <span class="edit" id="-${info[i].stuNo}">
									编辑
								</span>
							</td>
                            
                        </tr>
                    </tbody>
					`
			}
            document.getElementById('table').innerHTML = strOri

            // 绑定点击事件
            for (let i = 0; i < info.length; i++) {
                document.getElementById(info[i].stuNo).onclick = function() {
                    console.log(info[i].stuNo)
                    // 根据id删除对象数据 - 过滤出来数据
                    let newData = []
                    for (let j = 0; j < info.length; j++) {
                        if(info[j].stuNo !== info[i].stuNo) {
                            newData.push(info[j])
                        }
                    }
                    info = newData
                    draw()
                }
            }
            
            for (let i = 0; i < info.length; i++) {
                document.getElementById(-info[i].stuNo).onclick = function() {
                    let oriStuNo = '${i + 1}'
                    $("#stuNo").val(i + 1);
                    $("#stuName").val((info[i].stuName));
                    $("#className").val(info[i].className);
                    $("#major").val(info[i].major);

                    draw()
                }

            }
            // $("#add").click(function() {
            //     // if($("#stuNo").val == null || $("#stuName").val == null || $("#className").val == null || $("#major").val == null) {
            //     //     $("#tip").innerHTML = "请输入完整信息";
            //     // }
            //     // else 
            // });
            document.getElementById("add").onclick =  function() {
                if($("#stuNo").val() == "" || $("#stuName").val() == "" || $("#className").val() == "" || $("#major").val() == "") {
                    $("#tip").text("请输入完整信息");
                }else if(info.length + 1 == $("#stuNo").val()){
                    let newData = []
                        for (let j = 0; j < info.length; j++) {	
							newData.push(info[j])
						}
                        newData.push({
                        stuNo: info.length + 1,
                        stuName: $("#stuName").val(),
                        className: $("#className").val(),
                        major: $("#major").val()
                        })
                        info = newData
                        clear()
                        $("#tip").text("");
                }else {
                    $("#tip").text("已有该学号的学生");
                }
                draw()
            }

            document.getElementById("update").onclick =  function() {
                if($("#stuNo").val() == "" || $("#stuName").val() == "" || $("#className").val() == "" || $("#major").val() == "") {
                    $("#tip").text("请输入完整信息");
                }else if($("#stuNo").val() = info.length){
                    let newData = []
                        for (let j = 0; j < info.length; j++) {	
							newData.push(info[j])
						}
                        let index = Number($("#stuNo").val())
                        newData[index - 1] = {
                        stuNo: $("#stuNo").val(),
                        stuName: $("#stuName").val(),
                        className: $("#className").val(),
                        major: $("#major").val()
                        }
                        info = newData
                        clear()
                        $("#tip").text("");
                }else {
                    $("#tip").text("没有该学号的学生");
                }
                draw()

            }

        }
        function clear() {
            $("#stuNo").val(info.length + 1);
            $("#stuName").val("");
            $("#className").val("");
            $("#major").val("");
        }
            
       


      
    }




    </script>
</body>
</html>